<template>
    <div class="footer base-width">
        <div class="column">
            <div class="logo">
                <img src="../assets/img/48.png" alt="">
            </div>
            <div>
                <ul @click="$router.push('/home/help/helpmenu1')">
                    <li><b>帮助中心</b></li>
                    <li><a href="">预售演出</a></li>
                    <li><a href="">关于座位</a></li>
                    <li><a href="">配送方式</a></li>
                    <li><a href="">无票赔付</a></li>
                    <li><a href="">订票提示</a></li>
                </ul>
            </div>
            <div>
                <ul @click="$router.push('/home/about/aboutmenu1')">

                    <li><b>关于我们</b></li>
                    <li><a href="">联系我们</a></li>
                    <li><a href="">公司介绍</a></li>
                    <li><a href="">问题反馈</a></li>
                    <li><a href="">隐私政策</a></li>

                </ul>
            </div>

            <div>
                <ul>
                    <li><b>支付方式</b></li>
                    <li class="aliPay"></li>
                    <li class="weixinPay"></li>
                </ul>
            </div>

            <div>
                <ul>
                    <li><b>关注我们</b></li>
                    <li class="wechat">
                        <!-- <span></span> -->
                        <a href="">微信公众号</a>
                        <img src="../assets/img/66.jpg" alt="">
                    </li>
                </ul>
            </div>

            <div>
                <ul class="ls">
                    <li><button>联系客服</button></li>
                    <li>周一至周日9:00-21:00</li>
                </ul>
            </div>
        </div>
        <div class="copyright">
            <p>Copyright©2015-2020 上海锐赏文化传播有限公司 All Rights Reserved | 沪ICP备17026590号-1</p>
            <p> 公司地址：上海市徐汇区龙漕路299号2幢三层南部301室</p>
            <p>
                营业执照 | 营业性演出许可证 | 增值电信业务经营许可证
            </p>
            <div>
                <div>
                    <img src="../assets/img/39.png" alt="">
                    <span>上海工商</span>
                </div>
                <div>
                    <img src="../assets/img/38.png" alt="">
                    <span>沪公网安备 31010402004599号</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
div {
    display: flex;
}

.footer {
    width: 1160px;
    margin: 0 auto;
    flex-direction: column;
    margin-top: 80px;

    >.column {
        justify-content: space-between;
        padding-bottom: 50px;

        >.logo {
            >img {
                object-fit: cover;
                display: block;
                width: 150px;
                height: 70px;
            }
        }

        >div {
            border-collapse: collapse;

            >ul {
                margin: 0;
                padding: 0;

                >li {
                    list-style: none;
                    margin-bottom: 10px;
                    font-size: 12px;

                    >a {
                        display: inline-block;
                        color: gray;
                        text-decoration: none;
                    }

                    >img {
                        width: 51px;
                        height: 18px;
                    }

                }

                >li.wechat {
                    position: relative;

                    >img {
                        display: block;
                        object-fit: cover;
                        width: 100px;
                        height: 100px;
                        position: absolute;
                        right: 0;
                        transform: translate(100%, -30%);
                        display: none;
                    }

                    &:hover>img {
                        display: block;
                    }
                }

                >li.aliPay,
                li.weixinPay {
                    width: 51px;
                    height: 18px;
                    background-image: url(../assets/img/67.png);
                    background-repeat: no-repeat;
                    background-size: 522px 487px;
                    background-position: -464px -84px;

                }

                li.weixinPay {
                    width: 63px;
                    background-position: -285px -167px;
                }

                &.ls {
                    display: flex;
                    flex-direction: column;
                    margin-right: 70px;

                    li {
                        font-weight: 500;

                        >button {
                            background-color: transparent;
                            width: 90px;
                            height: 24px;
                            border-radius: 100px;
                            color: #ff4655;
                            border: solid 1px #ff4655;
                            text-align: center;
                            font-size: 12px;
                            letter-spacing: 1px;
                            line-height: 24px;
                            cursor: pointer;
                        }
                    }
                }

            }
        }
    }

    >.copyright {
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-bottom: 20px;

        >p {
            margin: 0;
            padding: 0;
            font-size: 12px;
            color: #494949;
            line-height: 20px;
            text-align: center;
        }

        >div {
            align-items: center;
            font-size: 12px;
            color: #494949;

            >div {
                align-items: center;

                >img {
                    display: block;
                    object-fit: cover;
                    width: 20px;
                }

            }

            >div:nth-child(2) {
                margin-left: 40px;

                >img {
                    display: block;
                    object-fit: cover;
                    width: 15px;
                    height: 15px;
                }
            }
        }
    }
}
</style>